import BaseChart from "@/components/Chart/BaseChart.vue";
import * as echarts from "echarts";
import { dayjs } from "element-plus";
import { PropType } from "vue";
export default defineComponent({
	props: {
		dashboardData: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	setup(props) {
		const state = reactive({
			type: "ymd" as "ymd" | "md", //年月日、月日
			basicTotal: {
				year: "3452.45",
				month: "552.9",
				day: "15.95",
				today: "15.95",
				yesterday: "15.95"
			},
			active: "day" as "year" | "month" | "day" | "today" | "yesterday"
		});
		watchEffect(() => {
			if (props.dashboardData?.totalInfo?.month) {
				state.type = "md";
				state.active = "month";
				state.basicTotal.month = props.dashboardData.totalInfo.month;
				state.basicTotal.today = props.dashboardData.totalInfo.today;
				state.basicTotal.yesterday = props.dashboardData.totalInfo.yesterday;
			}
		});
		return () => {
			return (
				<div class="w-full left-basic item-container">
					<div class="title">能耗分析</div>
					<div class="flex body">
						<div class="category">
							{state.type == "ymd" ? (
								<>
									<BasicItem label="本年" short="年" value={state.basicTotal.year} />
									<BasicItem label="当月" short="月" value={state.basicTotal.month} />
									<BasicItem label="今日" short="日" value={state.basicTotal.day} />
								</>
							) : (
								<>
									<BasicItem label="今日" short="今日" value={state.basicTotal.today} />
									<BasicItem label="昨日" short="昨日" value={state.basicTotal.year} />
									<BasicItem label="本月" short="本月" value={state.basicTotal.month} />
								</>
							)}
						</div>
						<div class="right-chart flex-1">
							<div class="time-type flex justify-center">
								{state.type == "ymd" ? (
									<>
										<div class={["item", state.active == "year" ? "active" : ""]} onClick={() => (state.active = "year")}>
											年趋势
										</div>
										<div class={["item", state.active == "month" ? "active" : ""]} onClick={() => (state.active = "month")}>
											月趋势
										</div>
										<div class={["item", state.active == "day" ? "active" : ""]} onClick={() => (state.active = "day")}>
											日趋势
										</div>
									</>
								) : (
									<>
										<div class={["item", state.active == "month" ? "active" : ""]} onClick={() => (state.active = "month")}>
											近三十日能源趋势
										</div>
									</>
								)}
							</div>
							<TrendChart dataType={state.active} dataList={props.dashboardData.trend} />
						</div>
					</div>
				</div>
			);
		};
	}
});

const TrendChart = defineComponent({
	props: {
		dataList: {
			type: Array
		},
		dataType: {
			type: String as PropType<"year" | "month" | "day" | "today" | "yesterday">
		}
	},
	setup(props) {
		const trendChartOpts = reactive({
			tooltip: {
				trigger: "axis",
				formatter: "{b} <br/> {a}: {c} kWh",
				axisPointer: {
					type: "shadow"
				}
			} as any,
			toolbox: { show: false },
			legend: { show: false },
			xAxis: {
				splitLine: { show: false },
				axisLine: { lineStyle: { color: "#7ac0c6" } },
				axisLabel: { textStyle: { color: "#7ac0c6" } },
				data: [] as any[],
				type: "category",
				boundaryGap: false
			},
			yAxis: {
				type: "value",
				splitLine: { show: true, lineStyle: { color: "#083f3a" } },
				axisLabel: { show: false, formatter: `{value}` }
			},
			grid: {
				left: "15",
				right: "15",
				bottom: "5%",
				top: "15",
				containLabel: true
			},
			series: [
				{
					type: "line",
					smooth: true,
					name: "用电",
					showSymbol: false,
					lineStyle: {
						color: "#14dcd7",
						width: 4
					},
					//区域图-背景
					areaStyle: {
						opacity: 1,
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{
								offset: 0, //底部
								color: "#0b4d44"
							},
							{
								offset: 0.3, //50%位置
								color: "#0b4d44"
							},
							{
								offset: 1, //顶部
								color: "#0b4d4400"
							}
						])
					},
					markPoint: null,
					emphasis: {
						focus: "series",
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: "rgba(0, 0, 0, 0.5)"
						}
					},
					data: [] as any[]
				}
			]
		});
		const trendChart = ref();
		watchEffect(() => {
			if (props.dataType) {
				trendChartOpts.xAxis.data = [];
				trendChartOpts.series[0].data = [];
				if (props.dataList?.length) {
					props.dataList.forEach((item: any) => {
						trendChartOpts.xAxis.data.push(dayjs(item.xData + " 00:00:00").format("MM-DD"));
						trendChartOpts.series[0].data.push(item.yData);
					});
					trendChart.value?.setChart(trendChartOpts);
				}
			}
		});
		onMounted(() => {
			// trendChartOpts.xAxis.data = ["1", "1", "1", "1", "1", "1", "1"];
			// trendChartOpts.series[0].data = ["1", "10", "51", "71", "21", "41", "81"];
			// trendChart.value.setChart(trendChartOpts);
		});
		return () => {
			return (
				<div class="chart-container w-full">
					<BaseChart ref={trendChart} width="100%" />
				</div>
			);
		};
	}
});
const BasicItem = defineComponent({
	props: {
		short: String,
		label: String,
		value: [String, Number]
	},
	emits: [],
	setup(props) {
		return () => {
			return (
				<div class={["item"]}>
					<div class="item-icon">
						<text class="text">{props.short}</text>
					</div>
					<div class="item-info">
						<div class="category">{props.label}用电</div>
						<div class="val">
							<text class="val-text year-electricity">{props.value}</text>
							<text class="val-unit">kWh</text>
						</div>
					</div>
				</div>
			);
		};
	}
});
